<template>
  <div id="usersDetails">
    <el-form :label-position="labelPosition">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span style="color: #666666; font-size: 14px">基本信息</span>
          <el-button
            style="float: right"
            type="primary"
            size="small"
            @click="isPassword = true"
          >重置密码</el-button>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item>
              <div style="height: 155px">
                <el-image
                  fit="cover"
                  :src="listData.faceFileUrl"
                  alt
                  style="
                    margin-top: 20px;
                    width: 88px;
                    height: 88px;
                    border-radius: 50%;
                  "
                  :preview-src-list="[listData.faceFileUrl]"
                >
                  <div slot="error" class="image-slot">
                    <i class="icon_web icongonggong_morentouxiang"></i>
                  </div>
                </el-image>
              </div>
            </el-form-item>
            <el-form-item label="性别:">
              <div class="label_info">{{ listData.sex == 0 ? "男" : "女" }}</div>
            </el-form-item>
            <el-form-item label="粉丝量:">
              <div class="label_info">{{ listData.fansNum | formatnumber }}</div>
            </el-form-item>
            <el-form-item label="QQ:">
              <div class="label_info">{{ listData.qq || "— —" }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户ID:">
              <div class="label_info">{{ listData.memberId }}</div>
            </el-form-item>
            <el-form-item label="账号状态:">
              <div class="label_info">
                <span style="margin-right: 10px" v-if="listData.locking == 0">正常</span>
                <el-button
                  type="primary"
                  size="mini"
                  round
                  @click="freezeIn"
                  v-if="listData.locking == 0"
                >冻结</el-button>
                <span style="margin-right: 10px; color: #e74550" v-if="listData.locking == 1">已冻结</span>
                <el-button
                  type="primary"
                  size="mini"
                  round
                  @click="unfreeze"
                  v-if="listData.locking == 1"
                >解冻</el-button>
                <a class="view_reason" @click.prevent="onFreeze" v-if="listData.locking == 1">查看原因</a>
              </div>
            </el-form-item>
            <el-form-item label="手机号码:">
              <div class="label_info">{{ listData.mobile }}</div>
            </el-form-item>
            
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户名:">
              <div class="label_info">{{ listData.loginName }}</div>
            </el-form-item>
            <el-form-item label="认证状态:">
              <div class="label_info">
                {{
                listData.status == 0
                ? "未认证"
                : listData.status == 1
                ? "审核中"
                : listData.status == 2
                ? "已认证"
                : "认证失败"
                }}
              </div>
            </el-form-item>
            <el-form-item label="账户余额:">
              <div class="label_info">¥{{ listData.accountBalance | formatmoeny }}</div>
            </el-form-item>
            <el-form-item label="微博:">
              <div class="label_info">{{ listData.weibo || "— —" }}</div>
            </el-form-item>
            <el-form-item label="个性签名:">
              <div class="label_info">{{ listData.signature || "— —" }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="注册时间:">
              <div class="label_info">{{ listData.registerDate || "— —" }}</div>
            </el-form-item>
            <el-form-item label="用户类型:">
              <div class="label_info">{{ listData.authenticateType == 0 ? "个人" : "企业" }}</div>
            </el-form-item>
            <el-form-item label="云币账户:">
              <div class="label_info">{{ listData.ymoneyBalance.split(".")[0] | formatnumber }}</div>
            </el-form-item>
            <el-form-item label="微信:">
              <div class="label_info">{{ listData.wechat || "— —" }}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!-- 认证信息 -->
      <el-card class="box-card" shadow="never" v-if="listData.authenticateType == 0">
        <div slot="header" class="clearfix">
          <span style="color: #666666; font-size: 14px">认证信息</span>
        </div>
        <el-col :span="7">
          <el-form-item label="姓名:">
            <div class="label_info">{{ memberList.name }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="身份证号码:">
            <div class="label_info">{{ memberList.idCard }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="手机号码:">
            <div class="label_info">{{ memberList.phone }}</div>
          </el-form-item>
        </el-col>
       
      </el-card>
    

      <!-- 银行卡信息 -->
      <el-card class="box-card" shadow="never" v-if="listData.authenticateType == 0">
        <div slot="header" class="clearfix">
          <span style="color: #666666; font-size: 14px">银行卡信息</span>
        </div>
        <el-row :gutter="24" type="flex">
          <el-col :span="6">
            <el-form-item label="姓名:">
              <div class="label_info">{{ memberList.bankPeopleName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号码:">
              <div class="label_info">{{ memberList.bankPeopleIdCard }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开户行:">
              <div class="label_info">{{ memberList.bankName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="银行卡号:">
              <div class="label_info">{{ memberList.bankAccount }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="height: 80px">
            <el-form-item label="银行卡预留电话:">
              <div class="label_info">{{ memberList.bankPhone }}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      
    </el-form>
    <!-- 重置密码 -->
    <el-dialog width="516px" :visible.sync="isPassword" append-to-body center class="dialog_close">
      <div slot="title" class="dialog-title">重置密码</div>
      <el-form label-width="100px" :rules="rules" :model="ruleForm" status-icon ref="ruleForm">
        <el-form-item label="新密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
            size="small"
            title="6-16位由数字和字母组成，区分大小写"
            @keyup.native.enter="resetPassword"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="rePassword">
          <el-input
            type="password"
            v-model="ruleForm.rePassword"
            autocomplete="off"
            size="small"
            @keyup.native.enter="resetPassword"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isPassword = false">取消</el-button>
        <el-button type="primary" @click="resetPassword">提交</el-button>
      </div>
    </el-dialog>
    <!-- 冻结弹窗 -->
    <el-dialog
      width="516px"
      :visible.sync="freezeDialog"
      append-to-body
      center
      class="dialog_close"
    >
      <div slot="title" class="dialog-title">冻结用户</div>
      <el-form :model="freezeForm" label-width="100px" ref="freezeForm">
        <el-form-item label="用户名:">{{ freezeForm.name }}</el-form-item>
        <el-form-item
          label="原因："
          prop="frozenReasons"
          :rules="[
            { required: true, message: '请输入冻结原因', trigger: 'blur' },
          ]"
        >
          <el-input
            type="textarea"
            v-model.trim="freezeForm.frozenReasons"
            autocomplete="off"
            placeholder="请输入冻结原因"
            maxlength="50"
            show-word-limit
            :autosize="{ minRows: 4, maxRows: 4 }"
            @keyup.native.enter="rejectSubmit"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            freezeDialog = false;
            freezeDialog = false;
          "
        >取消</el-button>
        <el-button type="primary" @click="rejectSubmit">提交</el-button>
      </div>
    </el-dialog>
    <!-- 权限设置 -->
    <el-dialog
      width="516px"
      :visible.sync="permissionSet"
      append-to-body
      center
      class="dialog_close"
    >
      <div slot="title" class="dialog-title">权限设置</div>
      <el-form label-width="140px" :model="permissionForm" ref="permissionForm" :rules="rules">
        <el-form-item label="用户名：">{{ permissionForm.name }}</el-form-item>
        <el-form-item label="肖像权保护权限：" prop="number">
          <el-switch
            class="tablescope"
            v-model="permissionForm.type"
            active-color="#3c69ca"
            inactive-color="#cecece"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
          <el-input
            placeholder="请输入保护人数"
            v-if="permissionForm.type == 1"
            v-model.trim="permissionForm.number"
            @keyup.native.enter="permissionSubmit"
            maxlength="16"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="permissionSet = false">取消</el-button>
        <el-button type="primary" @click="permissionSubmit">提交</el-button>
      </div>
    </el-dialog>
    <!-- 签收 -->
    <el-dialog
      width="400px"
      :visible.sync="isSignfor"
      append-to-body
      :showClose="false"
      class="dialog_post dialog_post_view"
    >
      <div slot="title" class="dialog-title">委托书邮寄信息：</div>
      <div class="signfor_bg" style="text-align: left">
        <i
          class="el-icon-warning-outline"
          style="
            font-size: 15px;
            vertical-align: middle;
            margin: -1px 10px 0 20px;
          "
        ></i>
        <span>请核对以下快递信息，如已签收请确认</span>
      </div>
      <div class="express_name">
        快递公司名称：
        <span>{{ expressList.expressCompany }}</span>
      </div>
      <div class="express_name">
        快递单号：
        <span>{{ expressList.expressBillNo }}</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isSignfor = false" size="small">取消</el-button>
        <el-button type="primary" @click="signforSubmit" size="small">确定</el-button>
      </div>
    </el-dialog>
    <!-- 查看 -->
    <el-dialog
      width="400px"
      :visible.sync="isViewExpress"
      append-to-body
      class="dialog_post dialog_post_view dialog_close"
    >
      <div slot="title" class="dialog-title">委托书邮寄信息：</div>
      <div class="express_name">
        快递公司名称：
        <span>{{ expressList.expressCompany }}</span>
      </div>
      <div class="express_name" style="padding-bottom: 20px">
        快递单号：
        <span>{{ expressList.expressBillNo }}</span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import {
//   memberDetail,
//   companyType,
//   freezeReason,
//   getResetPassword,
//   remind,
//   getEmsInfo,
//   getSignFor,
//   portraiture,
//   freeze,
//   changeOperatingModel
// } from "@/api/user/index";
// import md5 from "js-md5";
// import { validatePass } from "@/utils/validate";
let errorMsg = "";

export default {
  data() {
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    let validateNewPsd = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入新密码"));
      }
      if (!validatePass(value)) {
        callback(new Error("密码格式不符合要求"));
      } else if (errorMsg) {
        callback(new Error(errorMsg));
        errorMsg = "";
      } else {
        callback();
      }
    };
    let checkAge = (rule, value, callback) => {
      if (!value && this.permissionForm.type == 1) {
        return callback(new Error("请输入保护人数"));
      } else {
        callback();
      }
    };
    return {
      isPassword: false,
      freezeDialog: false,
      labelPosition: "top",
      imageUrl: "/img/home/addUserPhoto.png",
      ruleForm: {},
      freezeForm: {
        name: "",
        memberId: "",
        frozenReasons: ""
      },
      valueSwitch: 1,
      permissionSet: false,
      isSignfor: false,
      isViewExpress: false,
      rules: {
        // password: [
        //   { required: true, validator: validateNewPsd, trigger: "blur" }
        // ],
        // rePassword: [
        //   { required: true, validator: validatePass2, trigger: "blur" }
        // ],
        number: [
          { required: true, validator: checkAge, trigger: "blur" },
          {
            pattern: /^[0-9]*$/,
            message: "格式错误，请输入数字",
            trigger: ["blur", "change"]
          }
        ]
      },
      id: this.$route.query.id,
      listData: { ymoneyBalance: "" },
      memberList: {},
      companyList: [],
      expressList: {},
      permissionForm: {
        type: 1,
        name: "",
        number: "",
        memberId: ""
      }
    };
  },
  created() {
    this.init();
    this.getCompany();
  },
  methods: {
    init() {
      // memberDetail(this.id).then(res => {
      //   let data = res.data.data;
      //   this.listData = data;
      //   this.memberList = data.memberAuthenticate;
      //   console.log(this.listData);
      // });
    },

    //获取企业类型
    getCompany() {
      // companyType().then(res => {
      //   this.companyList = res.data.data;
      // });
    },

    onFreeze() {
      // freezeReason(this.listData.memberId).then(res => {
      //   this.$confirm("", "冻结原因：", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     // showClose: false,
      //     message: res.data.data
      //   })
      //     .then(() => {})
      //     .catch(() => {});
      // });
    },
    //提醒
    remind() {
      this.$confirm("您要提醒用户邮寄委托书?", "提示：", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false
      })
        .then(() => {
          remind(this.listData.memberId).then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "提醒成功!"
              });
            }
            this.init();
          });
        })
        .catch(() => {});
    },
    //查看
    viewExpress() {
      this.isViewExpress = true;
      // getEmsInfo(this.listData.memberId).then(res => {
      //   this.expressList = res.data.data;
      // });
    },
    //签收
    signFor() {
      this.isSignfor = true;
      // getEmsInfo(this.listData.memberId).then(res => {
      //   this.expressList = res.data.data;
      // });
    },
    //确认签收
    signforSubmit() {
      // getSignFor(this.listData.memberId).then(res => {
      //   if (res.data.code == 200) {
      //     this.$message({
      //       type: "success",
      //       message: "签收成功!"
      //     });
      //     this.isSignfor = false;
      //   }
      //   this.init();
      // });
    },
    //权限设置
    getPermissionSet() {
      // console.log(this.listData);
      // this.permissionSet = true;
      // this.permissionForm.name = this.listData.loginName;
      // this.permissionForm.memberId = this.listData.memberId;
      // this.permissionForm.type = this.listData.portraitRightStatus;
      // if (this.permissionForm.type)
      //   this.permissionForm.number = this.listData.protectNums;
      // else this.permissionForm.number = "";
      // // this.permissionForm.number =this.listData.protectNums;
    },
    //权限设置提交
    permissionSubmit() {
      // this.$refs["permissionForm"].validate(valid => {
      //   if (valid) {
      //     delete this.permissionForm.name;
      //     portraiture(this.permissionForm).then(res => {
      //       if (res.data.code == 200) {
      //         let msg = !this.permissionForm.type ? "关闭成功!" : "开通成功!";
      //         this.$message({
      //           type: "success",
      //           message: msg
      //         });
      //         this.permissionSet = false;
      //         // this.permissionForm.number = "";
      //       }
      //       this.init();
      //     });
      //   }
      // });
    },
    //重置密码
    resetPassword() {
      this.$refs["ruleForm"].validate(valid => {
        // if (valid) {
        //   let params = {
        //     id: this.$route.query.id,
        //     password: md5(this.ruleForm.password),
        //     rePassword: md5(this.ruleForm.rePassword)
        //   };
          // getResetPassword(params).then(res => {
          //   if (res.data.code == 200) {
          //     this.$message({
          //       type: "success",
          //       message: "修改成功!"
          //     });
          //     this.isPassword = false;
          //     this.ruleForm = {};
          //   }
          // });
        // }
      })
    }

  }
};
</script>

<style lang="scss">
#usersDetails {
  .el-card__header {
    padding: 18px 20px !important;
  }
  .el-card {
    border: none !important;
    border-radius: 0px !important;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .el-form--label-top {
    .el-form-item__label {
      padding: 0 0 10px;
    }
  }
  .el-form-item__content {
    line-height: 25px !important;
    display: flex;
    .label_info {
      color: #666;
      font-size: 14px;
    }
  }
  .el-form-item__label {
    color: #999;
    font-size: 14px;
  }
  .function_info {
    border-bottom: 1px dashed #e3e3e3;
    p {
      line-height: 80px;
      color: #666;
      font-size: 14px;
    }
  }
  .view_reason {
    margin-left: 10px;
    color: #3c69ca;
    &:hover {
      text-decoration: underline;
      cursor: pointer;
    }
  }
  .el-row--flex {
    flex-flow: wrap;
  }
  .image__error {
    background-color: #f5f5f5;
    width: 200px;
    height: 150px;
  }

  .image-slot {
    // width: 88px;
    // height: 88px;
    .icongonggong_morentouxiang {
      font-size: 88px;
      color: #cdcdcd;
      line-height: 88px;
    }
  }
}
.tablescope {
  .el-switch__label--left {
    position: absolute;
    left: 20px;
    color: #fff;
    z-index: -1111;
    font-size: 12px;
  }
  .el-switch__label--right {
    position: absolute;
    right: 20px;
    color: #fff;
    z-index: -1111;
    font-size: 12px;
  }
  .el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }
  .el-switch__label--left.is-active {
    z-index: 1111;
    color: #fff !important;
  }
}
.dialog_post_view {
  .el-dialog__header {
    border-bottom: none;
  }
  .signfor_bg {
    background-color: #fff6eb;
    width: 400px;
    height: 25px;
    margin: -26px 0 10px -30px;
    line-height: 25px;
    color: #fba73b;
    font-size: 12px;
  }
}

.express_name {
  margin-bottom: 10px;
  color: #666666;
  font-size: 14px;
}
</style>